<template>
  <div>
    <el-row align="middle" class="pt-5">
      <el-col :span="16">
        <p class="main_title">{{ $t("menu.ANNOUNCE") }}</p>
      </el-col>
    </el-row>

    <div style="display: flex; margin: 15px;0;15px;0">
      <div style="flex: 0 0 90%;padding-right: 5px;padding-left: 5px;" class="mb-4">
        <el-row :gutter="20" class="search_block pt-5">
          <el-col :span="9">
            <el-input class="formItem" v-model="searchData.term" placeholder="请输入主办方ID\名称\公告ID\名称"  @change="doList" clearable>
                <el-button slot="append" icon="el-icon-search" @click="doList">查询</el-button>
            </el-input>
          </el-col>
        </el-row>
      </div>
    </div>

    <div style="position: sticky">
      <div class="table_container">
        <el-table v-loading="loading" :data="announces" :header-cell-style="boxheader" :row-style="{height:0+'px'}" :cell-style="{padding:0+'px'}" style="width: 100%">
          <el-table-column prop="announceid" label="公告ID" min-width="60px"></el-table-column>
          <el-table-column prop="name" label="公告标题" min-width="200px" align="left" show-overflow-tooltip> </el-table-column>
          <el-table-column min-width="80px" align="left" label="主办方ID" :render-header="renderheader" prop="gu_id">
              <template slot-scope="scope">
                <span>{{ scope.row.orgid }}</span>
              </template>
          </el-table-column>
         <el-table-column  min-width="180px" prop="orgname"  label="主办方名称" show-overflow-tooltip></el-table-column>
           <el-table-column min-width="220px" align="left" label="公告链接" show-overflow-tooltip>
            <template slot-scope="scope">
              <span class="btnCell" @click="openUrl(scope.row.url)">{{ scope.row.url }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="160px" align="center" label="抓取时间" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.publishtime}}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="240px" prop="summary"  label="摘要" show-overflow-tooltip></el-table-column>
          <el-table-column min-width="120px" align="center" :label="$t('common.OPER')" fixed="right">
            <template slot-scope="scope">
                <el-button style="margin-left:0px !important;" type="text" @click="openUrl(scope.row.url)">{{ $t('common.DETAIL') }}</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="col-sm pt-3 text-sm-left" style="text-align:right; display: contents">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchData.curpage" :page-sizes="[5, 10, 20, 50]"
            :page-size="searchData.pagesize" layout="total, sizes,  pager, jumper" :total="searchData.total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { parseTime } from "@/utils/index"

import enlargeImg from "@/assets/images/icon_2.png";
import narrowImg from "@/assets/images/icon_3.png";
import announceService from "@/service/announceService";
import i18n from "@/lang";
const baseURL = process.env.BASE_API

export default {
  name: "AnnounceList",
  components: {
  },
  data() {
    return {
      loading: false,
      boxheader: {
        // background: '#eef1f6',
        color: "#606266",
        fontWeight: 800,
        borderBottom: "2px solid #EBEEF5",
      },
      searchData: {
        curpage: 1,
        pagesize: 10,
        total: 0,
        term: ""
      },
      announces: [],
      width: "600px",
    };
  },
  watch: {},
  mounted: function () {
    // console.log(window.screen.height);
    this.$store.dispatch("setActive", "9").then(() => {
      // this.$root.eventBus.$emit('exit')
    });
    // commit('SET_ACTIVE', 5)
  },
  created() {
    this.ELHeight = window.screen.height - 320;
    if (window.screen.height === 900) {
      this.ELHeight = 460;
    }
    this.doList();
  },
  destroyed() {},
  methods: {
    parseTime,
    renderheader(h, { column, $index }) {
      return h("span", {}, [
        h("span", {}, column.label.split("/")[0]),
        h("br"),
        h("span", {}, column.label.split("/")[1]),
      ]);
    },
    doList() {
      this.searchData.curpage = 1;
      this.listAnnounce();
    },
    listAnnounce() {
      this.loading = true
      let searchData = {...this.searchData}
      delete searchData.total
      let params = searchData
      announceService.listAnnounce(params).then((res) => {
        this.loading = false
        if (res.status === 200 && res.data.result === 0) {
          this.announces = res.data.data;
          this.searchData.total = res.data.total;
        }
      });
    },
    openUrl(url) {
      window.open(url, '_blank')
    },
    handleSizeChange(val) {
      this.searchData.pagesize = val;
      this.listAnnounce();
    },
    handleCurrentChange(val) {
      this.searchData.curpage = val;
      this.listAnnounce();
    }
  },
};
</script>

<style>
.main_title {
  color: #343434;
  font-size: 18px;
  margin: 7px 0 0 0;
}
.btnCell{
  color: #1890ff;
  cursor: pointer;
}
</style>
